

get('.icon-gouwuchex').addEventListener('click',function(){//模态框关闭
  get('.ModalFrame').style.display='none';

})

get('#imgx').addEventListener('click',function(){
  imgX()/* 点击锁显示密码调用---ok */
})
get('#nameY').onclick=function () {
  nameWord()/* 用户名登陆封装调用---ok */
}

get('.btnT').onclick= function () {
  twoDimensional()/* 二维码登录封装调用---ok*/
}

get('#btnxx').addEventListener('click',function(){
  inputLog()/* 正则验证封装调用 ---ok*/
})





let listDataArr = [
  //第一行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

  //第二行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第三行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第四行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
let apiTypeData = [
  { name: "全部", keyword: "身份证实名", isnew: false },
  { name: "生活服务", keyword: "银行卡", isnew: false },
  { name: "金融科技", keyword: "短信", isnew: false },
  { name: "交通地理", keyword: "天气", isnew: false },
  { name: "充值缴费", keyword: "短信", isnew: false },
  { name: "数据智能", keyword: "手机归属地", isnew: false },
  { name: "企业工商", keyword: "IP", isnew: false },
  { name: "应用开发", keyword: "手机归属地", isnew: false },
  { name: "电子商务", keyword: "IP", isnew: false },
  { name: "吃喝玩乐", keyword: "视频", isnew: false },
  { name: "文娱视频", keyword: "视频", isnew: false },
  { name: "免费接口大全", keyword: "短信", isnew: true },
  { name: "短信", keyword: "身份证实名", isnew: false },
  { name: "汽车", keyword: "银行卡", isnew: false },
  { name: "核验", keyword: "银行卡", isnew: false },
  { name: "最新发布", keyword: "银行卡", isnew: true },
  { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]






apiTypeData.forEach(function(v,i){
  get('.api-top ul').innerHTML += `  <li class="${i===0?'active':''} ${v.isnew==true?'Isnew':'iSnew'}"> ${v.name}</li>`
  
})//按钮渲染

for (let i = 0; i < listDataArr.length; i++) {
  // console.log(listDataArr[i].name);//第一步，先测试能不能拿到对象---ok
  get('.api-id ul').innerHTML += `<li>
      <h4 class="${(listDataArr[i].isSpecial==true)?'on onm':'off'}">企业专用</h4>
      <img src="../../assets/imgs/${listDataArr[i].img}" alt="">
       <h3>${listDataArr[i].name}</h3>
       <p class="${listDataArr[i].isSpecial?'red':'green'}">${listDataArr[i].price}</p>
       <button class="cbutton active">立即申请</button>
  </li>`
}  //内容渲染


get('.api-id').addEventListener('click',function(){
let flag1=0; 

  if(flag1===0){
    get('#ModalFrame').style.display = "block";
     flag1=1; 
  }else{
    get('#ModalFrame').style.display = "none";
    flag1=0;
  }
   
})  //点击显示模态框



 let lis=getAll('.api-top ul li')  //点击按钮变色


for(let i=0;i<lis.length;i++ ){
 lis[i].addEventListener('click',function(){
    for(j=0;j<lis.length;j++){
      lis[j].style.color='black'
      lis[j].style. borderColor='#f0f0f0'
    }
    this.style.color='#52bdff'//this指向调用者，点击哪个按钮值哪个，谁就生效
    this.style. borderColor='#52bdff'
    get('.search').innerHTML=` <h3 class="ds" style="font-weight:bold;">${apiTypeData[i].name}&nbsp;&nbsp;&nbsp;&nbsp;</h3>
    <i class="iconfont icon-gouwuche"></i>
    <input type="text" class="search-input"  placeholder="${apiTypeData[i].keyword}">`
  })

}
let Api=document.querySelectorAll('.api-id ul li')
 let ApiButton=getAll('.api-id ul li .cbutton')
for(let i=0;i<Api.length;i++){
  Api[i].addEventListener('mouseover',function(){
    for(j=0; j<ApiButton.length;j++){
      ApiButton[i].classList.remove('active') 
    }    
  })
}

for(let i=0;i<Api.length;i++){
  Api[i].addEventListener('mouseleave',function(){
    for(j=0; j<ApiButton.length;j++){
      ApiButton[i].classList.add('active') 
    }    
  })
}









